<template>
  <div class="all">
    <div class="handupDiv">
      <span class="btnSpan">
        <el-button class="handupBtn"
                   type="primary"
                   @click="toNewActivities">
          活动发起 <i class="el-icon-document" />
        </el-button>
        <el-button class="handupBtn"
                   type="primary"
                   @click="checkFlag = true">
          审核 <i class="el-icon-s-check" />
        </el-button>
      </span>
      <span style="margin-left: 10px">
        <el-input v-model="searchWords"
                  placeholder="请输入内容"
                  class="input-with-select"
                  style="width: 320px">
          <el-select slot="prepend"
                     v-model="searchWordsType"
                     placeholder="请选择"
                     style="width: 120px">
            <el-option label="活动标题"
                       value="1" />
            <el-option label="活动发起人"
                       value="2" />
          </el-select>
          <el-button slot="append"
                     icon="el-icon-search" />
        </el-input>
      </span>
      <span class="pageSpan">
        <el-pagination :current-page.sync="currentPage3"
                       :page-size="100"
                       layout="prev, pager, next, jumper"
                       :total="1000"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
      </span>
    </div>
    <el-divider />
    <div id="themeDiv"
         class="themeDiv">
      <el-row>
        <el-button class="btn-all"
                   plain
                   @click="getList">全部</el-button>

        <el-dropdown v-for="(theme, index) in activitiesThemeWords"
                     :id="index"
                     :key="theme"
                     split-button
                     class="el-dropdown"
                     @click="getList(index)">
          {{ theme }}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(status, statusIndex) in activitiesThemeStatus[index]"
                              :key="statusIndex"><a @click="getListBystatus(index, statusIndex)">{{ status }}</a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-row>
    </div>
    <div class="articleDiv">
      <div class="articleList">
        <table>
          <thead>
            <tr>
              <td colspan="1">
                <span>全部主题</span>
                <span>最新</span>
                <span>最热</span>
              </td>
              <td>作者</td>
              <!-- <td>查看</td> -->
              <!-- <td>最后发表</td> -->
            </tr>
          </thead>
          <tbody v-for="items in ActivitiesList"
                 :key="items">
            <tr>
              <td>
                <!-- <span @click="getList(items.themeId)">[{{ items.theme }}]</span> -->
                <a href="javascript:;"
                   @click="getExListAndSetBtn(items.themeId)">[{{ activitiesThemeWords[ items.theme -1] }}]</a>
                <!-- <a href="/articleDetail">{{ items.title }}</a> -->
                <a @click="toActivity(items.activityid)">{{ items.activitytitle }}</a>
                <span v-if="items.activityStatus != 0">{{
                  activityStatusWords[items.statusflag+1]
                }}</span>
              </td>
              <td style="witdh=135px">
                <p>{{ items.initiatorName }}</p>
                <p>{{ items.createtime }}</p>
              </td>
              <!-- <td style="witdh=42px">
                <p>{{ items.view }}</p>
              </td> -->
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 举报审核 -->
    <div>
      <el-dialog :visible.sync="checkFlag"
                 title="举报列表"
                 center>
        <el-table :data="checkList">
          <el-table-column prop="time"
                           label="时间"
                           width="160px" />
          <el-table-column prop="checkManName"
                           label="举报人">
            <template slot-scope="scope">
              {{ scope.row.checkManName
              }}<i v-show="scope.row.username == 'admin'"
                 style="color: red"
                 class="el-icon-medal" />
            </template>
          </el-table-column>
          <el-table-column prop="checkedManName"
                           label="被举报人" />
          <el-table-column prop="title"
                           label="标题">
            <template slot-scope="scope">
              <a class="checkMessage"
                 @click="toActivity">{{
                scope.row.title
              }}</a>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="checkType" label="举报类型" />
          <el-table-column prop="memo" label="举报理由" /> -->
        </el-table>
        <span slot="footer"
              class="dialog-footer"
              style="text-align: center">
          <el-button @click="checkFlag = false">取 消</el-button>
          <el-button type="primary"
                     @click="checkFlag = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { listActivities } from '@/api/heart/activitiesList'
export default {
  data () {
    return {
      checkFlag: false,
      checkList: [
        {
          url: '',
          title: '本周六有偿租借一辆四座以上汽车送老人去医院',
          checkManId: 1,
          checkManName: '王刚',
          checkedManId: 2,
          checkedManName: '高奇',
          // checkType: "其他违规信息",
          // memo: "存在假货伪装成正品买的情况",
          time: '2021-05-31 19:17:32'
        }
      ],
      searchWordsType: '',
      searchWords: '',
      activitiesThemeWords: ['儿童发布', '社区关爱', '家属求助', '夕阳论坛'],
      activityStatusWords: ['默认', '已领取', '已完成', '被中止'],
      activitiesThemeStatus: [
        ['默认', '已领取'],
        ['默认', '已过期'],
        ['默认', '已领取'],
        ['默认', '已过期']
      ],
      ActivitiesList: []
    }
  },
  mounted () {
    console.log('1111')
    this.getList()
    console.log('0000')
  },
  methods: {
    getList () {
      listActivities().then(
        response => {
          this.ActivitiesList = response.rows
        }
      )
    },
    toNewActivities () {
      this.$router.push({ path: 'newActivities' })
    },
    toActivity (id) {
      console.log('#############', id)
      this.$router.push({ path: '/elderlyAndChildren/activityDetail/' + id })
    }
  }
}
</script>
<style>
.all {
  width: 90%;
  margin: 25px auto;
}
.pageSpan {
  float: right;
}
.themeDiv {
  width: 100%;
  height: 30px;
  margin: 15px 15px;
}
.btn-all {
  margin-right: 5px;
}
.el-dropdown {
  margin: 0 5px;
}
.articleDiv {
  margin: 15px 15px;
}
.articleList {
  border: 1px solid #ccc;
}
.articleList table {
  border-collapse: collapse;
  width: 100%;
  border-top: 1px solid #aaa;
  font-size: 14px;
  line-height: 1.5px;
}
.articleList table thead tr td {
  background-color: #eee;
  height: 45px;
}
.articleList table thead tr td span {
  margin-left: 16px;
  color: #336699;
}
.articleList table tr td {
  border-bottom: 1px solid #aaa;
  height: 15px;
}
.articleList table tbody tr td a:first-child {
  /* //帖子前的类别 */
  color: rgb(9, 152, 248);
  margin-right: 10px;
  margin-left: 16px;
  text-decoration: none;
}
.articleList table tbody tr td a:hover {
  text-decoration: underline;
}
.articleList table tbody tr td span:last-child {
  /* //帖子后的状态 */
  color: #cdcdcd;
  margin-right: 10px;
  margin-left: 16px;
}
.articleList table tr td p:last-child {
  color: #999;
}
</style>
